<template>
	<view class="TravelAdd">
		<u-toast ref="uToast"></u-toast>
		<u-navbar title="添加/修改出行人" :placeholder="true" :auto-back="true" bg-color="transparent"></u-navbar>
		<view class="travel_box">
			<u--form :model="form" :rules="rules" ref="uForm" :errorType="errorType"
				labelWidth="200rpx">
				<view class="travel_form">
					<u-form-item label="姓名" prop="name" borderBottom>
						<u--input input-align="right" v-model="form.name" border="none" placeholder="请输入旅客姓名"></u--input>
					</u-form-item>
					<u-form-item label="手机号" prop="mobile" borderBottom>
						<u--input input-align="right" v-model="form.mobile" type="number" border="none" placeholder="请输入旅客手机号"></u--input>
					</u-form-item>
					<u-form-item label="身份证" prop="identity">
						<u--input input-align="right" v-model="form.identity" type="idcard" border="none" placeholder="请输入旅客身份证"></u--input>
					</u-form-item>
				</view>
				<view class="travel_btn">
					<u-button throttleTime="1000" color="#45B9A2" shape="circle" :customStyle="{height: '96rpx'}" @click="submit" text="确定"></u-button>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		visitorAdd,
		visitorEdit,
		visitorDetail
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				form: {
					id: '',
					name: '',
					mobile: "",
					identity: ""
				},
				errorType: "toast",
				rules: {
					name: [{
							type: 'string',
							required: true,
							message: '请输入旅客的姓名',
							trigger: ['blur', 'change']
						},
					],
					mobile: [{
							type: 'string',
							required: true,
							message: '请输入旅客的手机号',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '您输入的手机号不正确',
							trigger: ['change', 'blur'],
						}
					],
					identity: [{
							type: 'string',
							required: true,
							message: '请输入旅客的身份证',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.idCard(value);
							},
							message: '身份证号不正确',
							trigger: ['change','blur'],
						}
					],
				},
			}
		},
		onLoad(options) {
			that = this;
			if(options.id) that.form.id = options.id,that.getDetail()
		},
		onReady() {
			that.$refs.uForm.setRules(that.rules);
		},
		methods: {
			getDetail(){
				visitorDetail({id:that.form.id}).then(res => {
					that.form = {
						id: res.data.id,
						name: res.data.name,
						mobile: res.data.mobile,
						identity: res.data.identity,
					};
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			submit() {
				that.$refs.uForm.validate().then(res => {
					if(that.form.id === ''){
						visitorAdd(that.form).then(res=>{
							that.$refs.uToast.show({
								type: "success",
								message: "添加成功",
								complete(){
									uni.navigateBack();
								}
							});
						}).catch(err=>{
							uni.$u.toast(err.msg);
						});
					}else{
						visitorEdit(that.form).then(res=>{
							that.$refs.uToast.show({
								type: "success",
								message: "修改成功",
								complete(){
									uni.navigateBack();
								}
							});
						}).catch(err=>{
							uni.$u.toast(err.msg);
						});
					}
				}).catch(errors => {
			
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.TravelAdd{
		min-height: 100vh;
		background-color: #F6F8FA;
		.travel_box{
			padding: 24rpx 36rpx 0;
			.travel_form{
				background-color: #ffffff;
				border-radius: 12rpx;
				padding: 0 24rpx;
				::v-deep .u-form-item__body{
					padding: 36rpx 0;
				}
			}
			.travel_btn{
				padding: 60rpx 36rpx;
			}
		}
	}
</style>
